<template>
    <el-dialog v-loading="true" v-model="visible" title="自动回复明细" width="1120px" append-to-body >
        <template v-if="visible">
            <ReplyDetailSearch ref="replySearchRef" :reply-type="props.type" @search="onSearch" @reset="onReset" />
            <ReplyDetailTable ref="replyTableRef" :reply-type="props.type" :fetch-params="state.search" />
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, defineEmits, nextTick, ref, watch, computed } from "vue";
import { ElForm, ElMessage } from "element-plus";
import ReplyDetailTable from './replyDetailTable.vue'
import ReplyDetailSearch from './replyDetailSearch.vue'

const emit = defineEmits(["update:modelValue", "submit"]);

const props = defineProps({
    /** 弹窗显隐藏 */
    modelValue: {
        type: Boolean,
        default: false,
    },
    /** 规则明细类型
     * 私聊类型: privateChat (默认),
     * 群聊类型: groupChat
    */
    type: {
        type: String,
        default: 'privateChat'
    },
    id: {
        type: Number
    }
});

const visible = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit("update:modelValue", value);
    },
});

watch(visible, async (value) => {
    if (value) {
        await nextTick()
        state.search.id = props.id
        replySearchRef.value?.reset()
    }
})

const replyTableRef = ref()
const replySearchRef = ref()

const state = reactive<{search: IFormData}>({
  search: {
    id: props.id,
    keyword: '',
    time: [],
  }
})

const onSearch = (v: any) => {
  state.search = { ...state.search, ...v }
}
const onReset = (v: any) => {
  state.search = { ...state.search, ...v }
}

interface IFormData {
    id: string | number;
    /** 用户名称 */
    keyword: string;
    /** 触发时间 */
    time: string[];
}


</script>
<style lang="scss" scoped>

</style>
